<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="稳定性箱变更详情">
        <template slot="btn">
          <el-button class="filter-item" plain="" size="small"
            @click="handleBack">返回
          </el-button>
          <!-- <el-button type="primary" icon="el-icon-open" size="small" v-if="!(data.change_status == '已确定'||data.change_status == '已结束')" @click="approve">审批
          </el-button> -->
          <el-button type="primary" icon="el-icon-open" size="small" v-if="data.instrument_check.Cancelable==true&&data.instrument_check.check_creator_id==userId" @click="undo(data.instrument_check.id)">撤销
          </el-button>
        </template>
      </modules-title>
    </div>

    <div style="padding:20px">
      <el-form label-width="160px" size="small" :label-position="left">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="变更申请编号：">
              <span>{{data.change_box_no}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原稳定性箱编号：">
              <span>{{data.old_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="原稳定性箱名称：">
              <span>{{data.old_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更换后稳定性箱编号：">
              <span>{{data.new_instrument.instrument_no}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="更换后稳定性箱名称：">
              <span>{{data.new_instrument.instrument_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="稳定性方案：">
              <span>{{data.stability_scheme_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="稳定性考察类型：">
             <span>{{data.inspect_type.inspect_type_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="放置条件：">
              <span>{{data.place_conditions.place_conditions_name}}</span>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="样品名称：">
              <span>{{data.sample_info.sample_name}}</span>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="放/取样计划编号：">
              <span>{{data.plan_no	}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称：">
              <span>{{data.project_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人：">
              <span>{{data.project_leader_name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更原因：">
              <span>{{data.change_reason}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人：">
              <span>{{data.creator_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请时间：">
              <span>{{data.created_at}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附件">
              <file-preview v-if="data.enclosure!=null&&data.enclosure!=[]"
                            :file-list="data.enclosure" 
                            :fileBtnOption="['preview']"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <item-title title="操作记录" :borderShow="false" />
      <div class="tt">
        <OptionLog v-if="data.id" :Id="data.id"></OptionLog>
        <!-- <el-table :data="history" style="width: 100%"  size="medium" :show-header='false'>
        <el-table-column prop="user_name"  width="200px">
          <template slot-scope="scope">
            <div>{{scope.row.user_name}}({{scope.row.department_name}})</div>
          </template>
        </el-table-column>
        <el-table-column prop="operation_time" width="200px"></el-table-column>
        <el-table-column prop="content" >
          <template slot-scope="scope">
            <div>
              <span>{{scope.row.a}}</span>
              <span v-if="scope.row.flow_id!=''"> 审批编号：<a style="color:#1890ff" @click="toD(scope.row.flow_id)">{{scope.row.SerialNumber}}</a></span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-for="(item,index) in history" :key="index">
        <span style="margin-left:12px;color:#666666;font-size:14px">{{item.b}}</span>
      </div> -->
      </div>
    </div>

    <el-dialog title="更换稳定性箱" :visible.sync="open" append-to-body
      :destroy-on-close="true" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="变更前设备" prop="num">
              <el-select style="width:100%" v-model="form.num" placeholder="变更前设备" clearable
                size="small">
                <el-option v-for="(item, index) in values" :key="index" :label="item.instrument_name"
                  :value="item" />
              </el-select>
            </el-form-item>
        <el-form-item label="变更原因">
          <el-input
            v-model="form.suggestion"
            type="textarea"
            placeholder="请输入变更原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="变更后设备" prop="num">
            <el-select style="width:100%" v-model="form.num" placeholder="变更后设备" clearable
            size="small">
            <el-option v-for="(item, index) in values" :key="index" :label="item.instrument_name"
                :value="item" />
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="gSubmitForm">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="取样记录" :visible.sync="openQ" width="500px" append-to-body
      :destroy-on-close="true" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="取样量" prop="qnum">
          <el-input v-model="form.qnum" placeholder="请输入取样量" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="qSubmitForm">提交</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog title="复核确认" :visible.sync="openC" width="500px" append-to-body
      :destroy-on-close="true" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="取样量">
          <span>{{qnum}}</span>
        </el-form-item>
        <el-form-item label="取样时间">
         <span>{{time}}</span>
        </el-form-item>
        <el-form-item label="取样人">
          <span>{{person}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="cSubmitForm">提交</el-button>
      </div>
    </el-dialog> -->
    <el-dialog title="放样记录" :visible.sync="openF" width="800px" append-to-body
      :destroy-on-close="true" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span='12'>
            <el-form-item label="稳定性箱编号" prop="num">
              <el-select style="width:100%" v-model="form.num" placeholder="稳定性箱编号" clearable
                size="small">
                <el-option v-for="(item, index) in values" :key="index" :label="item.instrument_name"
                  :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label="放样量" prop="fnum">
              <el-input v-model="form.fnum" placeholder="请输入放样量"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='14'>
            <el-form-item label="放样批号" prop="pnum">
              <div
                v-for="(item, index) in form.ph"
                :key="index"
              >
                  <el-form-item
                    label-width="0"
                    :prop="'ph.' + index + '.pnum'"
                    :rules="[
                      {
                        required: true,
                        message: '批号不能为空',
                        trigger: 'blur',
                      },
                    ]"
                  >
                   <el-row>
                      <el-col :span='20'>
                         <el-input
                         style="width:260px"
                            v-model="item.pnum"
                            placeholder="输入批号"
                          ></el-input>
                      </el-col>
                      <el-col :span='4'>
                           <el-button
                          icon="el-icon-plus"
                          type="text"
                          v-if="index == 0"
                          @click="addInputItem"
                          >添加
                        </el-button>
                        <el-button
                          class="text-btn-red"
                          icon="el-icon-delete"
                          type="text"
                          v-if="index != 0"
                          @click="deleteInputItem(index)"
                          >删除
                        </el-button>
                      </el-col>
                    </el-row>
                   
                   
                  </el-form-item>
              </div>
            </el-form-item>
          </el-col>
           <el-col :span='10'>
            
          </el-col>
        </el-row>
        <el-form-item label="是否带内包装" prop="check">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="内包装" prop="nmaterial">
            <el-checkbox-group v-model="checkList">
              <span v-for="(item,index) in v1" :key=index >
                <el-checkbox :label="item" style="width:100px">{{item.packing_material_name}}</el-checkbox>
              </span>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="内包装封口形式" prop="inum">
          <el-select style="width:100%" v-model="form.inum" placeholder="内包装封口形式" clearable multiple
                size="small" @change="selectInum">
                <el-option v-for="(item, index) in values1" :key="index" :label="item.sealing_name"
                  :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="外包装" prop="wmaterial">
          <div>
            <el-checkbox-group v-model="checkList1">
              <span v-for="(item,index) in v2" :key=index >
                <el-checkbox :label="item" style="width:100px">{{item.packing_material_name}}</el-checkbox>
              </span>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="外包装封口形式" prop="onum">
           <el-select style="width:100%" v-model="form.onum" placeholder="外包装封口形式" clearable multiple
                size="small" @change="selectOnum">
                <el-option v-for="(item, index) in values2" :key="index" :label="item.sealing_name"
                  :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="辅助措施" prop="cnum">
          <el-select style="width:100%" v-model="form.cnum" placeholder="辅助措施" clearable
                size="small">
            <el-option v-for="(item, index) in values3" :key="index" :label="item.secondary_measure_name"
              :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
     <el-dialog
      title="变更确认"
      :visible.sync="openC"
      width="500px"
      append-to-body
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="结论" prop="radio">
          <el-radio-group v-model="form.radio">
                <el-radio :label=item.id v-for="(item,index) in buttons" :key="index">{{item.value}}</el-radio>
          </el-radio-group>

          <!-- <el-radio v-model="form.radio" label="1">确认变更</el-radio>
          <el-radio v-model="form.radio" label="2">取消变更</el-radio> -->
        </el-form-item>
        <el-form-item label="处理意见" prop="suggestion">
          <el-input
            v-model="form.suggestion"
            type="textarea"
            placeholder="请输入处理意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="cSubmitForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeDetail,history,Sdetail,qUpdate,undoX} from "@/api/stability/change";
import OptionLog from '@/views/stability/change/details/optionLog.vue';
export default {
   components: { 
    OptionLog 
  },
  data() {
    let nmaterial = (rule, value, callback) => {
      if (this.checkList.length > 0) {
        callback();
      } else {
        callback(new Error("请至少选择一个内包装"));
      }
    };
     let wmaterial = (rule, value, callback) => {
      if (this.checkList1.length > 0) {
        callback();
      } else {
        callback(new Error("请至少选择一个外包装"));
      }
    };
    return {
      qnum:'',
      time:'',
      person:'',
      radio:'1',
      left: "left",
      tableData: [

      ],
      history:[],
      open: false,
      openQ: false,
      openC: false,
      openF: false,
      values: [
        {
          instrument_id:'1',
          instrument_name:'宝箱1',
          instrument_no:'1',
          brand_model:'1',
          attrs:'1',
          locker_id:'1',
          locker_name:'cdd'
        },
        {
          instrument_id:'2',
          instrument_name:'宝箱2',
          instrument_no:'1',
          brand_model:'1',
          attrs:'1',
          locker_id:'1',
          locker_name:'cdd1'
        },
      ],
      values1: [],
      values2: [],
      values3: [],
      checkList: [],
      checkList1: [],
      form: {
        radio:'',
        suggestion:'',
        reason: "",
        key: "",
        qnum:'',
        num: "",
        fnum: "",
        inum:[],
        onum:[],
        cnum:'',
        ph:[
          {
          pnum:''
          }
        ]
      },
      rules: {
        radio:[{required: true, message: "请选择", trigger: "change"}],
        qnum: [
          { required: true, message: "取样量不能为空", trigger: "blur" },
         ],
         num: [
          { required: true, message: "稳定性箱编号不能为空", trigger: "change" },
         ],
         fnum: [
          { required: true, message: "放样量不能为空", trigger: "blur" },
         ],
         pnum: [
          { required: false, message:'',trigger: "blur" },
         ],
         nmaterial: [
          { required: true,validator: nmaterial },
          ],
          wmaterial: [
            { required: true,validator: wmaterial },
          ],
         inum: [
          { required: true, message: "内包装封口形式不能为空", trigger: "change" },
         ],
         onum: [
          { required: true, message: "外包装封口形式不能为空", trigger: "change" },
         ],
         cnum: [
          { required: true, message: "辅助措施不能为空", trigger: "change" },
         ],
      },
      id:'',
      v1:[],
      v2:[],
      s1:[],
      s2:[],
      data:{
        instrument_check:{},
        inspect_type:{},
        old_instrument:{},
        new_instrument:{},
        sample_info:{},
        place_conditions:{}
      },
      id1:'',
      id2:'',
      surplus:'',
      id3:'',
      x:{},
      f_id:'',
      buttons:[],
      userId:'',
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},
  //属性是手动定义的所需监听的值
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userId = this.$store.getters.userInfo.user.id
    this.id = this.$route.query.id
    this.f_id = this.$route.query.f_id
    if (this.id) {
      this.getDetail(this.id)
      this.getHistory(this.id)
    }
    if(this.f_id){
      this.getDetail1(this.f_id)
    }
    // this.getMeasureList()
    // this.getImaterialList()
    // this.getOmaterialList()
    // this.getIsealingList()
    // this.getOsealingList()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    undo(flow_id){
      this.$confirm('此操作将撤销此申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data={
            flow_id:flow_id,
            model_type:'ExchangeStability'
          }
          undoX(data).then(res=>{
            if(res.code==200){
              this.$message.success('撤销成功')
              this.getDetail(this.id)
              this.getHistory(this.id)
              this.getDetail1(this.f_id)
            }
          })
        }).catch(() => {
          
        });

    },
    approve(){
      this.openC = true;
      this.form.radio='1'
    },
    toD(id){
      this.$router.push({name:'changeDetailss',query:{f_id:id}});
    },
    getDetail1(id){
     Sdetail(id).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.data = res.data
          history(this.data.id).then(res=>{
            if(res.code==200){
              this.history = res.data.data
              this.history.forEach(item=>{
                if(item.operation_content){
                  Object.assign(item,{a:item.operation_content.split('-')[0]})
                  Object.assign(item,{b:item.operation_content.split('-')[1]})
                }
                // if(item.data!=''){
                //   let data = JSON.parse(item.data)
                //   console.log(data)
                //   Object.assign(item,{a:data.old.instrument_name})
                //   Object.assign(item,{b:data.new.instrument_name})
                // }
              })
            }
          })
        }
      })
    },
    getHistory(id){
      history(id).then(res=>{
        if(res.code==200){
          this.history = res.data.data
          this.history.forEach(item=>{
            if(item.operation_content){
                  Object.assign(item,{a:item.operation_content.split('-')[0]})
                  Object.assign(item,{b:item.operation_content.split('-')[1]})
                }
            // if(item.data!=''){
            //   let data = JSON.parse(item.data)
            //   console.log(data)
            //   Object.assign(item,{a:data.old.instrument_name})
            //   Object.assign(item,{b:data.new.instrument_name})
            // }
          })
        }
      })
    },
    selectInum(){
     console.log(this.form.inum,this.values1)
     this.form.inum.forEach(item=>{
       this.values1.forEach(itm=>{
          if(item ==itm.id){
            let obj = {
              in_packing_material_id:itm.id,
              in_packing_material:itm.sealing_name
            }
            this.s1.push(obj)
          }
       })
     })
    },
    selectOnum(){
     this.form.onum.forEach(item=>{
       this.values2.forEach(itm=>{
          if(item ==itm.id){
            let obj = {
              in_packing_material_id:itm.id,
              in_packing_material:itm.sealing_name
            }
            this.s2.push(obj)
          }
       })
     })
    },
    getMeasureList(){
       measureList().then(res=>{
        if(res.code==200){
          this.values3 = res.data
        }
       })
    },
    getImaterialList(){
      materialList(1).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.v1 = res.data
        }
      })
    },
    getOmaterialList(){
      materialList(2).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.v2 = res.data
        }
      })
    },
    getIsealingList(){
       sealingList(1).then(res=>{
         if(res.code==200){
           console.log(res.data)
          this.values1 = res.data
        }
       })
    },
    getOsealingList(){
       sealingList(2).then(res=>{
         if(res.code==200){
           console.log(res.data)
          this.values2 = res.data
        }
       })
    },
    addInputItem() {
      this.form.ph.push({
        pnum:''
      });
    },
    deleteInputItem(index) {
      this.form.ph.splice(index, 1);
    },
    getDetail(id){
     changeDetail(id).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.data = res.data
        }
      })
    },
    q(id,index) {
      console.log(id,index)
      this.openQ = true;
      this.id2 = id
      this.surplus = this.tableData[index-1].surplus_num
    },
    f(id) {
      this.openF = true;
      this.id1 = id
    },
    c(row){
      console.log(row)
      this.openC = true
      this.id3 = row.id
      this.qnum = row.operation_num
      this.time = row.operation_time
      this.person = row.operation_user_name
    },
    //返回
    handleBack() {
      this.$route.params.refresh = true;
      this.$router.go(-1);
    },
    changeStability() {
      this.open = true;
    },
    handleClose() {
      this.open = false;
      this.openQ = false;
      this.openC = false;
      this.openF = false;
    },
    cSubmitForm(){
       let data = {
        id:this.id,
        status:Number(this.form.radio),
        deal_advice:this.form.suggestion
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
           qUpdate(data).then(res=>{
            if(res.code==200){
              this.openC = false;
              this.$message.success('审批成功')
              this.getDetail(this.id)
              // this.handleClose()
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
      // check(this.id3).then(res=>{
      //   if(res.code==200){
      //     this.$message.success('复核成功')
      //     this.openC = false;
      //     this.getDetail(this.id)
      //   }
      // })
    },
    changeR(){
      console.log(this.form.key)
       this.values.forEach(item=>{
         if(this.form.key==item.instrument_id){
           this.x={
              instrument_id:item.instrument_id,
              instrument_name:item.instrument_name,
              instrument_no:item.instrument_no,
              brand_model:item.brand_model,
              attrs:item.attrs,
              locker_id:item.locker_id,
              locker_name:item.locker_name
           }
         }
       })
    },
    gSubmitForm(){
      let data = {
        id:this.data.plan.id,
        instrument:{
              instrument_id:this.x.instrument_id,
              instrument_name:this.x.instrument_name,
              instrument_no:this.x.instrument_no,
              brand_model:this.x.brand_model,
              attrs:this.x.attrs,
              locker_id:this.x.locker_id,
              locker_name:this.x.locker_name
            },
        change_advice:this.form.reason    
      }
      changeInstrument(data).then(res=>{
        if(res.code==200){
          this.$message.success('更换成功')
          this.open = false;
          this.getDetail(this.id)
        }
      })
    },
    qSubmitForm(){
     this.$refs.form.validate((valid) => {
        if (valid) {
          let data = {
            id:this.id2,
            operation_num:Number(this.form.qnum),
            surplus_num:Number(this.surplus)
          }
          getSample(data).then(res=>{
            if(res.code==200){
              this.$message.success('取样成功')
              this.openQ = false;
              this.getDetail(this.id)
            }
          })
        }
     })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
           let ph = []
          this.form.ph.forEach(item=>{
            ph.push(item.pnum)
          })
          let checkList = []
          this.checkList.forEach(item=>{
            let obj = {
              in_sealing_id:item.id,
              in_sealing:item.packing_material_name
            }
            checkList.push(obj)
          })
          let checkList1 = []
          this.checkList1.forEach(item=>{
            let obj1 = {
              out_sealing_id:item.id,
              out_sealing:item.packing_material_name
            }
            checkList1.push(obj1)
          })
          let data = {
            id:this.data.plan.id,
            put_sample_id:this.id1,
            batch_no:ph,
            instrument:{
              instrument_id:this.form.num.instrument_id,
              instrument_name:this.form.num.instrument_name,
              instrument_no:this.form.num.instrument_no,
              brand_model:this.form.num.brand_model,
              attrs:this.form.num.attrs,
              locker_id:this.form.num.locker_id,
              locker_name:this.form.num.locker_name
            },
            operation_num:Number(this.form.fnum),
            if_packing:Number(this.radio),
            in_packing:{
              in_sealing_ary:checkList,
              in_packing_material_ary:this.s1
            },
            out_packing:{
              out_sealing_ary:checkList1,
              out_packing_material_ary:this.s2
            },
            secondary_measure_id:this.form.cnum.id,
            secondary_measure_name:this.form.cnum.secondary_measure_name,
          }
          console.log(data)
          putSample(data).then(res=>{
            if(res.code==200){
              console.log(res.data)
              this.$message.success('放样成功')
              this.openF = false;
              this.getDetail(this.id)
            }
          })
          }
      })
     }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-row {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
::v-deep .el-button--text {
  padding: 0;
  margin: 0 !important;
  margin-right: 10px !important ;
}
 
</style>
<style>
.tt .el-table__row>td{
  border: none;
}
/* 去掉上面的线 */
.tt .el-table th.is-leaf{
  border: none;
}
/* 去掉最下面的那一条线 */
.tt .el-table::before {
  height: 0px;
}
</style>